<template>
	<view>
		<view class="Adressimg">
			<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596712125388&di=a77f91f8b8e72c09bb9e5dd54c94b9e9&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F58b4ef69ed377.jpg" mode=""></image>
		</view>
		<view class="Adress_t">
			<view class="Adress_t1">
				<view class="title">
					碧桂园*四季酒店
				</view>
				<view class="garage">
					<view class="garage_kx">
						空闲车位 :
					</view>
					<view class="garage_sz">
						17
					</view>
				</view>
			</view>
			<view class="garage_sf">
				<view class="garage_gz">
					收费规则 :
				</view>
				<view class="garage_ck">
					点击查看
				</view>
			</view>
			<button type="default" @click="openmap(latitude, longitude, '快乐大道哦哦哦哦哦哦哦哦哦')">导航到车位</button>
		</view>
		<view class="dh">
			<view class="des">
				<view class="cw">
					<view class="cw1">
						空闲车位 :
					</view>
					<view class="cw2">
						17
					</view>
				</view>
				<view class="time">
					24小时以上
				</view>
			</view>
			<view class="cwdh">
				车位导航
			</view>
		</view>
	</view>
</template>

<script>
	import Map from '@/js_sdk/fx-openMap/openMap.js'
	export default {
		data() {
			return {
				res:[],
				latitude: 31.52966,
				longitude: 120.28429,
			};
		},
		onLoad:function(){
			uni.showLoading()
			this.setAjax()
		},
		methods:{
			openmap (latitude, longitude, name) {
				Map.openMap(parseFloat(latitude), parseFloat(longitude), name)
			},
			setAjax(){
				uni.hideLoading()
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style lang="scss">
	page {background-color: #F8F8F8;}
	.Adressimg {
		width: 100%;
		height: 400upx;
		image {width: 100%;height: 100%;}
	}
	.dh {
		margin: 25upx 30upx;background-color: #fff;border-radius: 15upx;height: 100upx;padding: 30upx 20upx;
		display: flex;justify-content: space-between;box-shadow: 1upx 2upx 5upx #ccc;
		.des {
			.cw {display: flex;line-height: 50upx;}
			.cw1 {font-size: 24upx;}
			.cw2 {font-size: 28upx;font-weight: 550;margin-left: 10upx;}
			.time {font-size: 24upx;color: #3F50B5;}
		}
		.cwdh {background-color: #3F51B5;border-radius: 40upx;width: 170upx;height: 60upx;color: #fff;line-height: 60upx;text-align: center;margin-top: 25upx;}
	}
	.Adress_t {
		background-color: #fff;
		padding: 35upx 30upx;
		.Adress_t1 {
			display: flex;justify-content: space-between;
			.title {font-size: 38upx;padding: 20upx 30upx 0 0;}
			.garage {
				display: flex;
				background-color: #3F50B5;border-radius: 15upx;
				width: 220upx;padding-left: 30upx;
				height: 80upx;
				color: #fff;line-height: 80upx;
				.garage_kx {text-align: center;}
				.garage_sz {font-size: 38upx;font-weight: 550;}
			}
		}
		.garage_sf {
			display: flex;height: 120upx;line-height: 120upx;
			.garage_gz {font-size: 34upx;}
			.garage_ck {font-size: 34upx;color:#3F51B5;margin-left: 30upx;}
		}
		button {
			width: 80%;margin-left: 10%;background-color: #3F51B5;border-radius: 50upx;
			color: #fff;line-height: 100upx;height: 100upx;
		}
	}
</style>
